import * as React from 'react';
import { FormItem } from '.';
import { Props } from './type';
import ConditionHandlers, { defaultHandler } from './visibilityController';
// import { ICondition } from '@/plugins/form/types';
import { ComponentExtraProperties } from '@/plugins/form/form-render/constants/extra-properties';
import { ColumnText } from '../../column-text/view';
import { PermissionFields, ICondition } from '@/plugins/form/types';
import { CurrencyArray } from '../CommonProps';

// https://juejin.im/post/6844903825493639182
export const WrapFormItem = <P extends object>(Component: React.ComponentType<P> | any) =>
  class NewComponent extends React.Component<Props> {
    public static defaultProps = Component.defaultProps || Component.WrappedComponent.defaultProps;
    public currentUnit?: string = ''; // 当前数值单位

    private handlePermission(renderMode: FormRenderModes, permission?: PermissionFields) {
      // 详情模式模式
      if (renderMode === 'detail') {
        // if (!permission) {
        //   return 'detail';
        // }
        // if (permission === 'readonly') {
        //   return 'detail';
        // }
        return 'detail';
      } else {
        // 发起模式
        if (!permission) {
          return 'editable';
        }
      }
      return permission;
    }

    // 获取数值单位
    getCurrentUnit = (unit: string) => {
      if (!unit) return;
      const currency = CurrencyArray.find((ele) => ele.value === unit)
        ?.currencyType;
      this.currentUnit = currency ? currency : unit;
    };

    public render() {
      const {
        renderMode,
        name,
        unit,
        code,
        layout,
        visibleConditions,
        form
      } = this.props;
      let readonly;
      let disabled = this.props.disabled;
      let required = this.props.required;
      const placeholder = this.props.placeholder + ((required || disabled) ? '' : '（选填）');
      const permission = this.handlePermission(renderMode, this.props.permission);
      this.getCurrentUnit(unit);
      // 优先判断关联权限
      let show = true;
      if (visibleConditions && visibleConditions.length > 0) {
        show = visibleConditions.every((el: ICondition) => {
          // 不同类型的条件处理器 只有一个条件先按且来写
          let handler = ConditionHandlers[el.componentType];
          if (!handler) {
            // console.info('缺少条件处理器,使用默认的条件处理');
            handler = defaultHandler;
          }
          let relateBoxValue;
          if (
            !form ||
            !form.getFieldsValue() ||
            Object.keys(form.getFieldsValue()).indexOf(el.conditionName) === -1
          ) {
            relateBoxValue = this.props.formValues?.[el.conditionName];
          } else {
            relateBoxValue = form.getFieldValue(el.conditionName);
          }
          // 解决外面不传form的问题
          return handler(el, relateBoxValue);
        });
      }
      if (!show) {
        return null;
      }

      // 权限判断
      if (permission === 'hide') {
        return null;
      }

      // 只读的情况 在编辑模式就是diabled掉
      if (permission === 'readonly' && this.props.code) {
        disabled = true;
      }

      // 是否必填
      if (permission === 'readonly' && required) {
        required = false;
      }

      // 只读的情况
      if (permission === 'detail' && this.props.code) {
        // 如果有code 判断是否是文本类型，如果是的话disabled
        if (
          ComponentExtraProperties[this.props.editSetting.key] &&
          ComponentExtraProperties[this.props.editSetting.key].detailComponent
        ) {
          // 详情就是只读 显示值，如果没有显示无
          required = false;
          disabled = true;
          readonly = true;
        } else {
          let value;
          if (this.props.code) value = this.props.formValues?.[this.props.code];
          // 取值会不会有问题
          return (
            <ColumnText
              code={code}
              layout={layout}
              name={this.currentUnit ? name + `(${this.currentUnit})` : name}
              value={value}
              geakey={this.props.editSetting.key}
            >
            </ColumnText>
          );
        }
      }

      if (React.Children.count(this.props.children)) {
        return (
          <Component
            {...(this.props as P)}
            disabled={disabled}
            required={required}
            readonly={readonly}
            placeholder={placeholder}
          />
        );
      }

      return (

        <FormItem {...this.props} required={required}>
          <Component
            {...(this.props as P)}
            disabled={disabled}
            required={required}
            readonly={readonly}
            placeholder={placeholder}
          />
        </FormItem>

      );
    }
  };
